<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sys" uri="/menutaglib"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>${sessionScope.web_name}</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link rel="stylesheet" id='style_color' href="<%=request.getContextPath()%>/resources/assets/plugins/system/css/${sessionScope.web_style}.css" type="text/css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/common/js/constants.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/system/js/common/fscapp_sys.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/mustache.js"></script>
<link href="<%=request.getContextPath()%>/resources/assets/plugins/bootstrap-fileinput/bootstrap-fileinput.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/jQuery-datatime/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/jQuery-datatime/js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/jQuery-datatime/js/jquery.ui.datepicker-zh-CN.js.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/jQuery-datatime/js/jquery-ui-timepicker-zh-CN.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
<link href="<%=request.getContextPath()%>/resources/assets/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath()%>/resources/assets/plugins/bootstrap-select/js/bootstrap-select.js" type="text/javascript"></script>
<link href="<%=request.getContextPath()%>/resources/assets/plugins/jQuery-datatime/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/resources/assets/plugins/jQuery-datatime/css/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/resources/assets/plugins/jQuery-datatime/css/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css" />
</head>
<body class="page-header-fixed">
	<!-- BEGIN HEADER -->
	<jsp:include page="../common/systemUserSelfHeader.jsp"></jsp:include>
	<!-- END HEADER -->
	<div class="page-container row-fluid">
		<div class="page-sidebar nav-collapse collapse">
			<!-- BEGIN SIDEBAR MENU -->
			<ul class="page-sidebar-menu">
				<sys:sysNav ctgLevelOne="sysUser" ctgLevelTwo="selfUpdate" />
			</ul>
			<!-- END SIDEBAR MENU -->
		</div>
		<div class="page-content">
			<div class="container-fluid">
				<div class="row-fluid crumbs">
					<!-- BEGIN PAGE HEADER-->
						<div class="beginPageHearderBg_1"></div>
						<div class="beginPageHearderBg_2"></div>
						<div class="page-title page-title-style"><i class="icon-calendar"></i>用户个人信息变更管理</div>
						<div class="page-title-desc"><i class="fa fa-info-circle"></i>用户可变更个人基本信息和扩展信息等(*)</div>
						<div class="span12 breadcrumb-style">
							<ul class="breadcrumb">
								<li>
									<i class="icon-home"></i>
									<a href="${sessionScope.web_home}">首页</a>
									<i class="icon-angle-right"></i>
								</li>
								<li>
									<a href="#">用户</a>
									<i class="icon-angle-right"></i>
								</li>
								<li><a href="#">个人信息变更</a></li>
							</ul>
							<!-- END PAGE TITLE & BREADCRUMB-->
						</div>

				</div>
				<div class="row-fluid">
					<div class="row-fluid" id="dashboard" style="margin-top: 0">
						<div class="modal-body tabbable tabbable-custom">
							<ul class="nav nav-tabs">
								<li class="active"><a href="#tab_1" data-toggle="tab">基本信息</a></li>
								<li><a href="#tab_1_2" data-toggle="tab">扩展信息</a></li>
							</ul>
							<div class="tab-content">
								<div class="tab-pane active" id="tab_1">
									<div class="portlet yellow">
										<div class="portlet-title">
											<div class="caption">
												<i class="icon-user"></i> <span
													class="caption-subject font-blue-madison bold uppercase"
													style="margin-right: 10px;">账 户 信 息</span>
											</div>
											<div class="tools">
												<a href="javascript:;" class="collapse"></a>
											</div>
										</div>
										<div class="portlet-body form">
											<div id="tab_1_1" class="tab-pane active">
												<script type="text/html" id="userFormTemp">
													<form role="form" id="userForm" class="form-horizontal">
														<div class="control-group span12">
															<label class="control-label span1">账号</label>
															<div class="controls span11">
																<input type="text" id="userNo" value="{{userNo}}" disabled class="span4 form-input-sty m-wrap" data-required="userNo" style="height:35px;"/>
															</div>
														</div>
														<div class="control-group">
															<label class="control-label span1">用户名</label>
															<div class="controls span11">
																<input type="text" id="userName" name="userName" value="{{userName}}" class="span4 form-input-sty m-wrap" data-required="userName" style="height:35px;"/>
															</div>
														</div>
														<div class="control-group">
															<label class="control-label span1">联系电话</label>
															<div class="controls span11">
																<input type="text"  class="span4 form-input-sty m-wrap" value="{{userTel}}" id="userTel" name="userTel" data-required="userTel" style="height:35px;"/>
															</div>
														</div>
														<div class="control-group">
															<label class="control-label span1">电子邮箱</label>
															<div class="controls span11">
																<input type="text" class="span4 form-input-sty m-wrap" id="userEmail" value="{{userEmail}}" name="userEmail" data-required="userEmail" style="height:35px;"/>
															</div>
														</div>
														<div class="control-group">
															<label class="control-label span1">性别</label>
															<div class="controls span11">
																<select class=" span4 m-wrap" data-live-search="true" id="userGender" name="userGender" style="height:35px;">
																	<option value="1"> 男 </option>
																	<option value="0"> 女 </option>
																</select>
															</div>
														</div>
														<div class="form-actions">
															<span style="margin-right:30px;"><a href="javascript:;" class="btn btn-info btn-outline m-wrap" id="submitBtn">提交变更 </a></span>
															<a href="javascript:;" class="btn btn-auto btn-outline m-wrap" id="cancelBtn" onClick="reset()"> 取 消 </a>
														</div>
													</form>
												</script>
											</div>
										</div>
									</div>
								</div>

								<div class="tab-pane" id="tab_1_2">
									<div class="portlet box yellow">
										<div class="portlet-title">
											<div class="caption">
												<i class="icon-user"></i>
												<span class="caption-subject font-blue-madison bold uppercase" style="margin-right: 10px;">账 户 信 息</span>
											</div>
											<div class="tools">
												<a href="javascript:;" class="collapse"></a>
											</div>
										</div>
										<div class="portlet-body">
											<div style="height: auto;" id="accordion2-2" class="accordion collapse">
												<form id="userPhotoForm" role="form">
													<div class="form-group">
														<div class="fileinput fileinput-new" data-provides="fileinput">
															<div class="fileinput-new thumbnail" style="width: 291px; height: 170px; margin-left: 120px;">
																<img src="" alt="" id="fileView" />
															</div>
															<div class="fileinput-preview fileinput-exists thumbnail"
																 style="max-width: 400px; max-height: 350px; margin-left: 120px;">
															</div>
															<div>
															<div class="controls span8 input-group" id="imgContent"> 
															<span class="btn btn-outline btn-file" style="margin-left: 120px;">
															     <span class="fileinput-new" onclick="uploadImgFn(this)"> 上传头像图片 </span>
															     <span class="fileinput-exists"> 更换头像图片 </span> 
															     
															</span>
															</div>
																<a href="javascript:;" class="btn fileinput-exists" data-dismiss="fileinput"> 删除头像图片 </a>
															</div>
														</div>
													<div style="clear: both;"></div> 
					                        		<input type="file" id="fileuploadBtn" style="display:none" onchange="filetoftp('file')" multiple="multiple" name="file">
													<div class="submit-btn">
														<a href="javascript:;" id="userPhotoSubmitBtn" class="btn btn-info btn-outline m-wrap" style="margin-left: 120px;"> 提交头像变更 </a>
													</div>
													<input type="hidden" id="fileName" name="fileName">
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- END CONTAINER -->
	<!-- BEGIN FOOTER -->
	<jsp:include page="../common/sysFooter.jsp"></jsp:include>
	<!-- END FOOTER -->
	<!-- BEGIN CORE PLUGINS -->
	<script>
		jQuery(document).ready(function() { 
			
			var url = getFtpUrl+"${sessionScope.userVO.userProfile.userPhotoUrl}";
			 
		    $("#fileView").prop("src",url);
		    $("#img_user").prop("src",url);
		    
			App.init();
			TableAdvanced.init();
			UIModals.init();
		});
	</script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/common/js/filetoftp.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/jquery.form.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/system/js/sys/selfUpdate.js"></script>
	<!-- END THEME LAYOUT SCRIPTS -->
</body>
</html>